<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <tree-tools
          :tree-node="company"
          is-root
          @addDept="addDept"
        />
        <el-tree
          :data="departs"
          :props="defaultProps"
          default-expand-all
        >
          <tree-tools
            slot-scope="{ data }"
            :tree-node="data"
            @delDept="getDepartments"
            @addDept="addDept"
            @editDept="editDept"
          />
          <el-dropdown-item @click.native="addDept(data)">添加子部门</el-dropdown-item>
          <el-dropdown-item>编辑部门</el-dropdown-item>
          <!-- 方式1 通过dom事件冒泡 -->
          <el-dropdown-item @click.native="handleDel(data.id)">删除部门</el-dropdown-item>
        </el-tree>
      </el-card>
    </div>
    <!-- <add-dept :show-dialog.sync="showDialog" /> -->
    <el-dialog
      title="新增部门"
      :visible="showDialog"
      @close="showDialog = false"
    >
      <add-dept
        ref="addDept"
        :show-dialog.sync="showDialog"
        :tree-node="node"
        @addDeptSuccess="getDepartments"
      />
    </el-dialog>
  </div>
</template>

<script>
import { delDepartment } from '@/api/department.js'
import { tranListToTreeData } from '@/utils/index.js'
import { getDepartments } from '@/api/department.js'
import TreeTools from './components/tree-tools.vue'
import AddDept from './components/add-dept.vue'
import { getDepartmentDetail } from '@/api/department.js'
export default {
  name: 'Departments',
  components: {
    TreeTools,
    AddDept
  },
  props: {},
  data() {
    return {
      company: { name: '山西二冬科技股份有限公司', manager: '负责人' },
      departs: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      node: null,
      showDialog: false
    }
  },
  created() {
    this.getDepartments()
  },
  mounted() {

  },
  methods: {
    addDept(node) {
      this.node = node
      this.showDialog = true
    },
    async editDept(node) {
      this.node = node
      this.showDialog = true
      // 方式1.把formData拿给父组件,通过prop传给子组件(不推荐)
      // 方式2.通过refs得到子组件,直接修改子组件的数据
      this.$refs.addDept.formData = await getDepartmentDetail(node.id)
      // 方式3.通过refs得到子组件,调用子组件的方法,间接修改子组件的数据
      // this.$refs.addDept.getDepartmentDetail(node.id)
    },
    handleDel(id) {
    // 通过elmecon
      this.$confirm('确认删除', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async action => {
        await delDepartment(id)
        // 通过elme
        this.$message({
          message: '删除成功',
          type: 'success',
          showClose: true,
          duration: 3000
        })
        this.getDepartment()
      }).catch(() => {

      })
    },
    async getDepartments() {
      const data = await getDepartments()
      this.company.name = data.companyName
      this.company.id = ''
      this.departs = tranListToTreeData(data.depts)
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>
